<template>
  <div>
    <!-- 以登录头部 -->
    <login
      v-if="tokenObj"
      @isExit="show = true"
      :nickname="nickname"
      :avatar="avatar"
    ></login>
    <!-- 未登录 -->
    <logout v-else></logout>
    <!-- 退出弹框 -->
    <van-dialog
      v-model="show"
      title="提示"
      message="是否确定退出？"
      confirm-button-text="退出"
      show-cancel-button
      class="exit-dialog"
      confirm-button-color="#108ee9"
      @confirm="exitBtn"
    >
    </van-dialog>
    <!-- 宫格 -->
    <div class="main">
      <van-grid
        :column-num="3"
        class="my-grid"
        :clickable="true"
        :border="false"
      >
        <van-grid-item
          v-for="(item, index) in gridItemList"
          :key="index"
          class="my-grid-item"
          :to="item.to"
        >
          <i slot="icon" :class="['iconfont', item.icon]"></i>
          <span slot="text" class="text">{{ item.text }}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 广告 -->
    <footer class="my-ad">
      <img src="../../assets/images/join.png" alt="" />
    </footer>
  </div>
</template>

<script>
import Login from './components/Login.vue'
import Logout from './components/Logout.vue'
import { mapState, mapMutations } from 'vuex'
import { userLogoutAPI, userAPI } from '@/api'
export default {
  name: 'My',
  components: { Login, Logout },
  data() {
    return {
      gridItemList: [
        { icon: 'icon-coll', text: '我的收藏', to: '/favorate' },
        { icon: 'icon-ind', text: '我的出租', to: '/rent' },
        { icon: 'icon-record', text: '看房记录', to: '' },
        { icon: 'icon-identity', text: '成为房主', to: '' },
        { icon: 'icon-myinfo', text: '个人资料', to: '' },
        { icon: 'icon-cust', text: '联系我们', to: '' }
      ],
      show: false,
      nickname: '',
      avatar: '',
      srcImg: 'http://liufusong.top:8080'
    }
  },
  computed: {
    ...mapState(['tokenObj'])
  },
  created() {
    this.userinfo()
  },
  methods: {
    ...mapMutations(['SET_TOKEN']),
    // 获取用户个人信息
    async userinfo() {
      if (this.tokenObj) {
        const { body } = await userAPI()
        this.nickname = body.nickname
        this.avatar = this.srcImg + body.avatar
      }
    },
    // 退出登录弹框
    async exitBtn() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      const data = await userLogoutAPI()
      if (data.status === 400) {
        return this.$toast(data.description)
      }
      this.SET_TOKEN(data.body)
      this.$toast(data.description)
      this.nickname = null
    }
  }
}
</script>

<style scoped lang="less">
// 弹框
:deep(.exit-dialog) {
  width: 270px;
  height: 141.5px;
  padding-top: 15px;
  top: 50%;
  border-radius: 7px;
  .van-dialog__header {
    padding-top: 6px;
    padding-bottom: 15px;
    font-size: 18px;
    line-height: 1;
    color: #000;
  }
  .van-dialog__message {
    padding: 0 15px 15px;
    line-height: 1.5;
    font-size: 15px;
    color: #888;
  }
  .van-button {
    font-size: 18px;
  }
}
// 宫格
:deep(.my-grid) {
  .my-grid-item {
    height: 95px;
    font-size: 13px;
    color: #333;
    .van-grid-item__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      padding: 16px 0 14px;
    }
    .iconfont {
      font-size: 20px;
    }
    .text {
      font-size: 13px;
    }
  }
}
// 广告
.my-ad {
  margin: 10px auto 0;
  width: 345px;
  img {
    width: 100%;
  }
}
</style>
